import robotoMetrics from '@capsizecss/metrics/roboto';
import { lighten, darken, rgba, saturate } from 'polished';

import { palette } from '../../color/palette';
import { type BraidTokens, extractFontMetricsForTheme } from '../tokenType';

const legacyViolet = {
  900: '#1E0B65',
  800: '#341B87',
  700: '#512EAA',
  600: '#6C41CE',
  500: '#8B5CEB',
  400: '#AD84F2',
  300: '#C6ACF5',
  200: '#E1D1F9',
  100: '#F1E8FD',
  50: '#FAF5FE',
};
const formAccent = palette.indigo['500'];
const critical = palette.red['700'];
const focus = rgba(palette.indigo['300'], 0.7);
const white = '#fff';
const brand = palette.seekBlue['500'];
const brandAccent = palette.seekPink['500'];
const brandAccentSoft = palette.seekPink['50'];
const brandAccentLight = palette.seekPink['200'];

const tokens: BraidTokens = {
  name: 'apac',
  displayName: 'APAC',
  legacy: true,
  typography: {
    fontFamily: `Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif`,
    webFont: null,
    fontMetrics: extractFontMetricsForTheme(robotoMetrics),
    fontWeight: {
      regular: 400,
      medium: 600,
      strong: 700,
    },
    heading: {
      weight: {
        weak: 'regular',
        regular: 'medium',
      },
      level: {
        '1': {
          mobile: {
            fontSize: 28,
            rows: 9,
          },
          tablet: {
            fontSize: 42,
            rows: 11,
          },
        },
        '2': {
          mobile: {
            fontSize: 21,
            rows: 8,
          },
          tablet: {
            fontSize: 28,
            rows: 9,
          },
        },
        '3': {
          mobile: {
            fontSize: 21,
            rows: 7,
          },
          tablet: {
            fontSize: 21,
            rows: 7,
          },
        },
        '4': {
          mobile: {
            fontSize: 18,
            rows: 7,
          },
          tablet: {
            fontSize: 18,
            rows: 7,
          },
        },
      },
    },
    text: {
      xsmall: {
        mobile: {
          fontSize: 12,
          rows: 5,
        },
        tablet: {
          fontSize: 12,
          rows: 5,
        },
      },
      small: {
        mobile: {
          fontSize: 14,
          rows: 5,
        },
        tablet: {
          fontSize: 14,
          rows: 5,
        },
      },
      standard: {
        mobile: {
          fontSize: 16,
          rows: 6,
        },
        tablet: {
          fontSize: 16,
          rows: 6,
        },
      },
      large: {
        mobile: {
          fontSize: 18,
          rows: 7,
        },
        tablet: {
          fontSize: 18,
          rows: 7,
        },
      },
    },
  },
  contentWidth: {
    xsmall: 400,
    small: 660,
    medium: 940,
    large: 1280,
  },
  grid: 4,
  touchableSize: 11,
  space: {
    gutter: 6,
    xxsmall: 1,
    xsmall: 2,
    small: 3,
    medium: 5,
    large: 8,
    xlarge: 12,
    xxlarge: 24,
    xxxlarge: 30,
  },
  transforms: {
    touchable: 'scale(0.95)',
  },
  transitions: {
    fast: 'transform .125s ease, opacity .125s ease',
    touchable: 'transform 0.2s cubic-bezier(0.02, 1.505, 0.745, 1.235)',
  },
  border: {
    radius: {
      small: '2px',
      standard: '4px',
      large: '6px',
      xlarge: '10px',
    },
    width: {
      standard: 1,
      large: 2,
    },
    color: {
      brandAccent,
      brandAccentLight,
      caution: palette.yellow['500'],
      cautionLight: palette.yellow['300'],
      critical,
      criticalLight: palette.red['300'],
      field: palette.grey['400'],
      focus,
      formAccent,
      formAccentLight: palette.indigo['300'],
      info: palette.blue['700'],
      infoLight: palette.blue['300'],
      neutral: palette.grey['700'],
      neutralLight: palette.grey['200'],
      neutralInverted: white,
      positive: palette.mint['700'],
      positiveLight: palette.mint['300'],
      promote: legacyViolet['700'],
      promoteLight: legacyViolet['300'],
    },
  },
  focusRingSize: 3,
  shadows: {
    small: [
      `0 2px 4px 0px ${rgba(palette.grey['800'], 0.1)}`,
      `0 2px 2px -2px ${rgba(palette.grey['800'], 0.1)}`,
      `0 4px 4px -4px ${rgba(palette.grey['800'], 0.2)}`,
    ].join(', '),
    medium: [
      `0 2px 4px 0px ${rgba(palette.grey['800'], 0.1)}`,
      `0 8px 8px -4px ${rgba(palette.grey['800'], 0.1)}`,
      `0 12px 12px -8px ${rgba(palette.grey['800'], 0.2)}`,
    ].join(', '),
    large: [
      `0 2px 4px 0px ${rgba(palette.grey['800'], 0.1)}`,
      `0 12px 12px -4px ${rgba(palette.grey['800'], 0.1)}`,
      `0 20px 20px -12px ${rgba(palette.grey['800'], 0.2)}`,
    ].join(', '),
  },
  color: {
    foreground: {
      brandAccent,
      brandAccentLight,
      caution: palette.yellow['900'],
      cautionLight: palette.yellow['300'],
      critical,
      criticalLight: palette.red['300'],
      formAccent,
      formAccentLight: palette.indigo['300'],
      info: palette.blue['700'],
      infoLight: palette.blue['300'],
      link: formAccent,
      linkLight: palette.indigo['300'],
      linkHover: formAccent,
      linkVisited: legacyViolet['700'],
      linkLightVisited: legacyViolet['300'],
      neutral: palette.grey['700'],
      neutralInverted: white,
      positive: palette.mint['700'],
      positiveLight: palette.mint['300'],
      promote: legacyViolet['700'],
      promoteLight: legacyViolet['300'],
      rating: palette.seekPink['500'],
      secondary: palette.grey['500'],
      secondaryInverted: rgba('#fff', 0.65),
    },
    background: {
      body: palette.grey['50'],
      bodyDark: palette.grey['900'],
      brand,
      brandAccent,
      brandAccentActive: darken(0.05, brandAccent),
      brandAccentHover: lighten(0.05, brandAccent),
      brandAccentSoft,
      brandAccentSoftActive: darken(0.05, brandAccentSoft),
      brandAccentSoftHover: darken(0.025, brandAccentSoft),
      caution: palette.yellow['500'],
      cautionLight: palette.yellow['100'],
      critical,
      criticalActive: darken(0.05, critical),
      criticalHover: saturate(0.1, lighten(0.05, critical)),
      criticalLight: palette.red['100'],
      criticalSoft: palette.red['50'],
      criticalSoftActive: darken(0.05, palette.red['50']),
      criticalSoftHover: darken(0.025, palette.red['50']),
      formAccent,
      formAccentActive: darken(0.05, formAccent),
      formAccentHover: saturate(0.5, lighten(0.075, formAccent)),
      formAccentSoft: palette.indigo['50'],
      formAccentSoftActive: darken(0.05, palette.indigo['50']),
      formAccentSoftHover: darken(0.025, palette.indigo['50']),
      info: palette.blue['700'],
      infoLight: palette.blue['100'],
      neutral: palette.grey['700'],
      neutralActive: darken(0.05, palette.grey['700']),
      neutralHover: lighten(0.05, palette.grey['700']),
      neutralLight: palette.grey['100'],
      neutralSoft: palette.grey['50'],
      neutralSoftActive: darken(0.05, palette.grey['50']),
      neutralSoftHover: darken(0.025, palette.grey['50']),
      positive: palette.mint['700'],
      positiveLight: palette.mint['100'],
      promote: legacyViolet['700'],
      promoteLight: legacyViolet['100'],
      surface: white,
      surfaceDark: palette.grey['800'],
    },
  },
};

export default tokens;
